<template>
  <el-container>
    <el-header
      style="margin-top:10px; padding:0; width:100%; border-bottom:2px solid #0c4c8e "
      height="40px"
    >
      <div class="table">
        <span>{{ courseName }}</span>
      </div>
      <el-button
        type="text"
        style="font-size:17px; color: rgb(12, 76, 142);text-decoration-line:underline; text-underline-position:under; float:right"
        @click="back"
        >返回首页</el-button
      >
    </el-header>
    <el-container>
      <el-aside width="180px" style="padding:0; margin-top:6px;">
        <navigation></navigation>
      </el-aside>
      <el-main style="padding:0;margin-top:6px; margin-left:15px">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import navigation from "../../components/teacher/courseManagement/navigation.vue";

export default {
  components: {
    navigation,
  },
  data() {
    return {
      courseName: "",
    };
  },
  methods: {
    back() {
      this.$router.replace({
        path: "/teacher",
      });
    },
  },
  mounted() {
    this.courseName = this.$store.state.course_title;
  },
};
</script>

<style scoped>
.table {
  font-size: 20px;
  color: #666666;
  border-radius: 2px;
  text-align: center;
  border-left: 1px solid #b0b4b8;
  border-right: 1px solid #b0b4b8;
  border-top: 2px solid #0c4c8e;
  height: 100%;
  padding:0 10px 0 10px;
  line-height: 40px;
  display: inline-block;
}
</style>
